let canvas = document.getElementById('can');
let ctx = canvas.getContext('2d');
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];

function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}

class Circle {
    constructor() {
        this.r = rand(5, 15);
        let x = rand(0, canvas.width - this.r);
        let y = rand(0, canvas.height - this.r);
        this.x = x < this.r ? this.r : x;
        this.y = y < this.r ? this.r : y;
        let speed = rand(1, 3);
        this.speedX = rand(0, 4) > 2 ? speed : -speed;
        this.speedY = rand(0, 4) > 2 ? speed : -speed;
    }

    drawCircle(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        ctx.fillStyle = 'rgba(204,204,204,0.3)';
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy);
        if (d < 150) {
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(_circle.x, _circle.y);
            ctx.closePath();
            ctx.strokeStyle = 'rgba(204,204,204,0.3)';
            ctx.stroke();
        }
    }

    move(w, h) {
        this.x += this.speedX / 10;
        if (this.x > w || this.x < 0) {
            this.speedX *= -1;
        }
        this.y += this.speedY / 10;
        if (this.y > h || this.y < 0) {
            this.speedY *= -1;
        }
    }
}

class curCircle extends Circle {
    constructor() {
        super();
    }

    drawCircle(ctx) {
        ctx.beginPath();
        this.r = 5;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        ctx.fillStyle = 'rgba(255,77,54,0.6)';
        ctx.fill();
    }
}

let circle = new curCircle();
let draw = function () {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < circles.length; i++) {
        circles[i].drawCircle(ctx);
        for (let j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j]);
        }
        circles[i].move(w, h);
    }
    if (circle.x) {
        circle.drawCircle(ctx);
        for (let k = 1; k < circles.length; k++) {
            circle.drawLine(ctx, circles[k])
        }
    }
    requestAnimationFrame(draw);
};

let init = function () {
    for (let i = 0; i < 100; i++) {
        circles.push(new Circle());
    }
    draw();
};

window.addEventListener('load', init);

canvas.addEventListener('mousemove', function (e) {
    e = e || window.event;
    circle.x = e.offsetX;
    circle.y = e.offsetY;
});

canvas.addEventListener('mouseout', function (e) {
    circle.x = null;
    circle.y = null;
});